<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
 	  xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

		<ui:composition template="/plantillas/comun.xhtml">
			<ui:define name="pageTitle">
				<h:outputText value="Tareas - Vimeworks"/>
			</ui:define>
			<ui:define name="pageContent">
				<h:form>
					<h3>
						<h:outputText value="Tareas del Proyectoss"/>
					</h3>
					<rich:collapsiblePanel header="Datos del Proyecto" style="width: 975px;">
						<h:panelGrid columns="2">
							<h:outputText value="Proyecto:" style="font-weight: bold;"/>
							<h:outputText value="#{tareas.proyecto.nombre}" />
							<h:outputText value="Empresa" style="font-weight: bold;"/>
							<h:outputText value="#{tareas.proyecto.recursoCliente.empresaCliente.nombre}" />
						</h:panelGrid>
					</rich:collapsiblePanel>
					<br/><br/>
					<rich:collapsiblePanel header="Listado de Tareas" style="width: 975px;">
						<br/>
						<h:panelGrid columns="4">
							<h:outputText value="Nombre:" />
							<h:inputText value="#{tareas.nombreBusqueda}"/>
							<a4j:commandButton value="Buscar" action="#{tareas.buscar}" render="listadoTareas" execute="@form"/>
							<a4j:commandButton value="Nueva" action="#{tareas.nueva}" execute="@form" oncomplete="#{rich:component('modalNuevaTarea')}.show(); return false;" render="panelIngreso"/>
						</h:panelGrid>
						<br/><br/>
						<h:panelGroup id="listadoTareas">
							<rich:dataTable id="tablaTareas" value="#{tareas.listaTareas}" var="tarea" rows="10" noDataLabel="No se han encontrado resultados">
								<rich:column>
									<f:facet name="header">
										<h:outputText value="Tarea Padre" />
									</f:facet>
									<h:panelGroup rendered="#{empty tarea.tarea.nombre}">
										<h:outputText value="N/A" />
									</h:panelGroup>
									<h:panelGroup rendered="#{not empty tarea.tarea.nombre}">
										<h:outputText value="#{tarea.tarea.nombre}" />
									</h:panelGroup>
								</rich:column>
								<rich:column>
									<f:facet name="header">
										<h:outputText value="Nombre" />
									</f:facet>
									<h:outputText value="#{tarea.nombre}" />
								</rich:column>
								<rich:column>
									<f:facet name="header">
										<h:outputText value="Tipo" />
									</f:facet>
									<h:outputText value="#{tarea.tipoTarea.nombre}" />
								</rich:column>
								<rich:column>
									<f:facet name="header">
										<h:outputText value="Recurso Asignado" />
									</f:facet>
									<h:outputText value="#{tarea.asignacionIntegrante.usuario.nombre} #{tarea.asignacionIntegrante.usuario.apellido}" />
								</rich:column>
								<rich:column>
									<a4j:commandLink action="#{tareas.editarTarea(tarea.codigo)}"  oncomplete="#{rich:component('modalActualizacionTarea')}.show(); return false;" render="panelActualizacion">
										<h:graphicImage value="/images/info.png" width="20px" height="20px" title="Editar"/>
									</a4j:commandLink>
									<a4j:commandLink action="#{tareas.eliminarTarea(tarea.codigo)}" onclick="return mostrarConfirmacion('Esta seguro que desea eliminar el registro?');" render="listadoTareas">
										<h:graphicImage value="/images/remove.png" width="20px" height="20px" title="Eliminar"/>
									</a4j:commandLink>
									<h:commandLink action="#{tareas.verActividades(tarea.codigo)}">
										<h:graphicImage value="/images/tareas.png" width="20px" height="20px" title="Ver Actividades"/>
									</h:commandLink>
								</rich:column>
							</rich:dataTable>
							<rich:dataScroller for="tablaTareas" maxPages="5" />
						</h:panelGroup>
					</rich:collapsiblePanel>
				</h:form>
				<rich:popupPanel id="modalNuevaTarea" modal="true" autosized="true">
					<f:facet name="header">
						<h:outputText value="Ingreso de Tarea" />
					</f:facet>
					<h:form>
						<a4j:outputPanel id="panelIngreso" >
							<h:panelGrid columns="2">
								<h:outputText value="Nombre:"/>
								<h:panelGroup>
									<h:inputText id="nombreNuevaTarea" value="#{tareas.tarea.nombre}" maxlength="150" size="33" required="true" requiredMessage="El campo 'nombre' es requerido">
										<f:validator validatorId="validadorNoVacio"/>
									</h:inputText>
									<rich:message ajaxRendered="true" for="nombreNuevaTarea"/>
								</h:panelGroup>
								<h:outputText value="Descripcion:"/>
								<h:inputTextarea value="#{tareas.tarea.descripcion}" rows="5" cols="30"/>
								<h:outputText value="Tipo de Tarea:"/>
								<h:panelGroup>
									<rich:select id="tipoTarea" value="#{tareas.tarea.tipoTarea.codigo}" defaultLabel="[Seleccionar]" required="true" requiredMessage="El campo 'Tipo de Tarea' es obligatorio">
										<f:selectItems value="#{tareas.listaTiposTarea}" var="tar" itemLabel="#{tar.nombre}" itemValue="#{tar.codigo}"/>
									</rich:select>
									<rich:message ajaxRendered="true" for="tipoTarea"/>
								</h:panelGroup>
								<h:outputText value="Integrante:"/>
								<h:panelGroup>
									<rich:select id="asignacion" value="#{tareas.tarea.asignacionIntegrante.codigo}" defaultLabel="[Seleccionar]" required="true" requiredMessage="Debe seleccionar un integrante del equipo para la tarea">
										<f:selectItem itemLabel="[Seleccionar]" itemValue=""/>
										<f:selectItems value="#{tareas.listaIntegrantes}" var="integrante" itemLabel="#{integrante.usuario.nombre} #{integrante.usuario.apellido}" itemValue="#{integrante.codigo}"/>
									</rich:select>
									<rich:message ajaxRendered="true" for="asignacion"/>
								</h:panelGroup>
							</h:panelGrid>
							<br/>
							<rich:pickList value="#{tareas.tareasSeleccionadas}" sourceCaption="Tareas Disponibles" targetCaption="Tareas Requeridas" listWidth="165px" listHeight="100px" orderable="false">
				                <f:selectItems value="#{tareas.listaTareasRequeridas}" var="tareaRequerida" itemValue="#{tareaRequerida.codigo}" itemLabel="#{tareaRequerida.nombre}" />
				            </rich:pickList>
							<br/>
							<br/>
							<rich:panel header="Fechas de la Tarea">
								<h:panelGrid columns="5">
									<h:outputText value="Tipo:" />
									<rich:select id="tipoFechaTarea" value="#{tareas.tipoTechaTarea.codigo}" required="true" requiredMessage="Campo obligatorio">
										<f:selectItems value="#{tareas.listaTiposFechaTarea}" var="tipoFecha" itemLabel="#{tipoFecha.descripcion}" itemValue="#{tipoFecha.codigo}"/>
									</rich:select>
									<h:outputText value="Fecha:" />
									<rich:calendar id="fechaTarea" value="#{tareas.fechaTarea}" datePattern="dd/MM/yyyy HH:mm"  showApplyButton="true" required="true" requiredMessage="Campo obligatorio"/>
									<a4j:commandButton value="Agregar" action="#{tareas.agregarFecha}" render="tablaFechasTarea, scrollFechasTarea, mensajeValidacionFechas" execute="tipoFechaTarea fechaTarea"/>
									<br/>
									<rich:message ajaxRendered="true" for="tipoFechaTarea"/>
									<br/>
									<rich:message ajaxRendered="true" for="fechaTarea"/>
								</h:panelGrid>
								<rich:message ajaxRendered="false" id="mensajeValidacionFechas"/>
								<rich:dataTable id="tablaFechasTarea" style="width: 100%;" value="#{tareas.tarea.fechaTareas}" var="fechaIterador" noDataLabel="No se han ingresado fechas para la tarea" rows="4">
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Tipo" />
										</f:facet>
										<h:outputText value="#{fechaIterador.tipoFechaTarea.descripcion}" />
									</rich:column>
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Fecha" />
										</f:facet>
										<h:outputText value="#{fechaIterador.fecha}" />
									</rich:column>
									<rich:column>
										<f:facet name="header">
											
										</f:facet>
										<a4j:commandLink actionListener="#{tareas.removerFecha(fechaIterador)}" onclick="return mostrarConfirmacion('Esta seguro que desea eliminar el la fecha?');" render="tablaFechasTarea, scrollFechasTarea">
											<h:graphicImage value="/images/remove.png"  width="20px" height="20px" title="Eliminar"/>
										</a4j:commandLink>
									</rich:column>
								</rich:dataTable>
							</rich:panel>
							<br/><br/>
							<a4j:commandButton value="Guardar" action="#{tareas.guardarTarea}" 
											   render="listadoTareas" data="#{facesContext.maximumSeverity.ordinal ge 2}" 
							                   execute="@form" oncomplete="ocultarModal('modalNuevaTarea', event.data);">
							</a4j:commandButton>
							<a4j:commandButton value="Cancelar" action="#{tareas.cancelar}" 
							                   oncomplete="#{rich:component('modalNuevaTarea')}.hide(); return false;" 
							                   render="panelIngreso" immediate="true"/>
						</a4j:outputPanel>
					</h:form>
				</rich:popupPanel>
				<rich:popupPanel id="modalActualizacionTarea" modal="true" autosized="true">
					<f:facet name="header">
						<h:outputText value="Actualizacion de Tarea" />
					</f:facet>
					<h:form>
						<a4j:outputPanel id="panelActualizacion" >
							<h:panelGrid columns="2">
								<h:outputText value="Nombre:"/>
								<h:inputText id="nombreActualizacionTarea" value="#{tareas.tarea.nombre}" maxlength="150" size="33" readonly="true">
								</h:inputText>
								<h:outputText value="Descripcion:"/>
								<h:inputTextarea value="#{tareas.tarea.descripcion}" rows="5" cols="30" readonly="false"/>
								<h:outputText value="Tipo de Tarea:"/>
								<h:inputText value="#{tareas.tarea.tipoTarea.nombre}" maxlength="150" size="33" readonly="true"/>
								<h:outputText value="Integrante:"/>
								<rich:select id="asignacionAct" value="#{tareas.tarea.asignacionIntegrante.codigo}">
									<f:selectItem itemLabel="[Seleccionar]" itemValue="0"/>
									<f:selectItems value="#{tareas.listaIntegrantes}" var="integrante" itemLabel="#{integrante.usuario.nombre} #{integrante.usuario.apellido}" itemValue="#{integrante.codigo}"/>
								</rich:select>
							</h:panelGrid>
							<br/>
							<rich:dataTable value="#{tareas.tareasSeleccionadasEdicion}" var="tareaEdicion">
								<rich:column>
									<f:facet name="header">
										<h:outputText value="Lista de Tareas Requeridas" />
									</f:facet>
									<h:outputText value="#{tareaEdicion.nombre}" />
								</rich:column>
							</rich:dataTable> 
							<!-- br/>
							<rich:pickList value="#{tareas.tareasSeleccionadas}" sourceCaption="Tareas Disponibles" targetCaption="Tareas Requeridas" listWidth="165px" listHeight="100px" orderable="false">
				                <f:selectItems value="#{tareas.listaTareasRequeridasEdicion}" var="tareaRequerida" itemValue="#{tareaRequerida.codigo}" itemLabel="#{tareaRequerida.nombre}" />
				            </rich:pickList-->
							<br/>
							<br/>
							<rich:panel header="Fechas de la Tarea">
								<rich:dataTable id="tablaFechasTarea" style="width: 100%;" value="#{tareas.tarea.fechaTareas}" var="fechaIterador" noDataLabel="No se han ingresado fechas para la tarea" rows="4">
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Tipo" />
										</f:facet>
										<h:outputText value="#{fechaIterador.tipoFechaTarea.descripcion}" />
									</rich:column>
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Fecha" />
										</f:facet>
										<rich:calendar value="#{fechaIterador.fecha}" datePattern="dd/MM/yyyy HH:mm"  showApplyButton="true"/>
									</rich:column>
								</rich:dataTable>
							</rich:panel>
							<br/><br/>
							<a4j:commandButton value="Actualizar" action="#{tareas.guardarTarea}" 
											   render="listadoTareas" data="#{facesContext.maximumSeverity.ordinal ge 2}" 
							                   execute="@form" oncomplete="ocultarModal('modalActualizacionTarea', event.data);">
							</a4j:commandButton>
							<a4j:commandButton value="Cancelar" action="#{tareas.cancelar}" 
							                   oncomplete="#{rich:component('modalActualizacionTarea')}.hide(); return false;" 
							                   render="panelIngreso" immediate="true"/>
							<a4j:commandButton value="Ver Actividades" action="#{tareas.verActividades(tareas.tarea.codigo)}" style="float: right;"/>
						</a4j:outputPanel>
					</h:form>
				</rich:popupPanel>
			</ui:define>
		</ui:composition>
	
</html>